import React, { Component } from 'react';
import { View, Textarea, Image, ScrollView } from '@tarojs/components'
// import classnames from 'classnames'
// import { staticUrl } from '@/utils'
import './index.scss'


interface State{}

export default class Index extends Component<any> {

    constructor () {
        super(...arguments)
        this.state = {
            hotKeywords: [],
            historyList: [],
            recommendList: [],
            recommendStatus: false,
            isfocus: true,
            searchText: '',
            isLogin: false,
            searchStatus: false
        }
    }

    state:State

    UNSAFE_componentWillMount() {}
    componentDidMount() {}
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {}
    componentWillUnmount() {}


    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    componentDidNotFound() { }


    handleBtn() {}
    searchPage(keywordText) {}
    setClearHistorySearch() {}
    render() {
        const { isfocus, recommendStatus, hotKeywords, recommendList, historyList, searchText } = this.state
        return <View className='search'>1</View>
        // return (
        //     <View className='search-main'>
        //         <View className='search-keyword'>
        //             {/* <search-input
        //             :cssStyle="'background-color: #fff; border-color: #12B3FF'"
        //             @focusEvent="focusFn"
        //             :autofocus="isfocus"
        //             :inputText="searchText"
        //             @inputChanged="inputChanged"
        //             ></search-input> */}
        //             { isfocus && <View  onClick={() => this.handleBtn()}  className='search-cancel' style={searchText.length ? 'color: #12B3FF': ''}>{searchText.length ? '搜索' : '取消'}</View> }
        //         </View>
        //         <View className='search-relation'>
        //             <View className='search-relation-box'>
        //                 {
        //                     !recommendStatus &&
        //                     <View className='search-info'>
        //                         {
        //                             hotKeywords && hotKeywords.length && <View className='search-find'>热门搜索 </View>
        //                         }
        //                         <View className='search-text' >
        //                             {
        //                                 hotKeywords.map((keywordText, idx) => {
        //                                     return <View key={`${idx}-${keywordText}`} onClick={() => this.searchPage(keywordText)}>{keywordText}</View>
        //                                 })
        //                             }
        //                         </View>
        //                     </View>
        //                 }
        //             </View>
        //             <View className='search-history'>
        //                 {
        //                     historyList && historyList.length (
        //                         <View className='his-wrap'>
        //                             <View className='icon-shanchu font_family' onClick={() => this.setClearHistorySearch()}></View>
        //                                 <View>历史搜索</View>
        //                                 <View>
        //                                 {
        //                                     historyList.map(history => {
        //                                         return <View onClick={() => this.searchPage(history)} key={history}>{history}</View>
        //                                     })
        //                                 }
        //                                 </View>
        //                         </View>
        //                     )
        //                 }
        //             </View>
        //         </View>
        //         <View className='recommend-list'>
        //             {
        //                 recommendStatus &&
        //                 <View className='search-suggest'>
        //                     {
        //                         recommendList.map(recommend => {
        //                             return (
        //                                 <View className='search-suggest-list' onClick={() => this.searchPage(recommend.name)} key={recommend.id}>
        //                                     {recommend.name}
        //                                     <View v-if='recommend.brand.length'>
        //                                         {
        //                                             recommend.brand && recommend.brand.length && recommend.brand.map(brand => {
        //                                                 return (
        //                                                     <View key={brand.id}>
        //                                                     {brand.name}
        //                                                     </View>
        //                                                 )
        //                                             })
        //                                         }
        //                                     </View>
        //                                 </View>
        //                             )
        //                         })
        //                     }
        //                 </View>
        //             }
        //         </View>
        //     </View>
        // )
    }
}
